<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理后台</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/theme-chalk/index.css">
    <link rel="stylesheet" href="/static/global.css">
</head>
<body class="bg-gray">
<div id="app" class="admin" v-cloak>
    <div class="page-header">
        <div class="page-header_inner">
            <div class="admin-logo">
                <img src="/static/logo.png" style="width: 110px; height: auto ">
            </div>
            <div class="admin-header">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>管理后台</el-breadcrumb-item>
                </el-breadcrumb>
                <div class="header-link">
                    <el-link :underline="false" href="/user/account.html">返回个人中心</el-link>
                    <el-link :underline="false" href="/logout.html">退出</el-link>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body" style="display: flex">
        <div class="page-side">
            <el-menu default-active="index" class="admin-menu" background-color="#273043">
                <el-menu-item index="index">
                    <a href="/admin/index.html"><i class="el-icon-data-analysis"></i> 概况总览</a>
                </el-menu-item>
                <el-submenu index="resource">
                    <template slot="title">
                        <i class="el-icon-receiving"></i> 素材中心
                    </template>
                    <el-menu-item index="resource-video"><a href="/admin/video.html">视频</a></el-menu-item>
                    <el-menu-item index="resource-image"><a href="/admin/image.html">图片</a></el-menu-item></el-menu-item>
                    <el-menu-item index="resource-carousel"><a href="/admin/carousel.html">轮播图</a></el-menu-item></el-menu-item>
                </el-submenu>
                <el-menu-item index="user">
                    <a href="/admin/userList.html"><i class="el-icon-user"></i> 用户管理</a>
                </el-menu-item>
                <el-menu-item index="course">
                    <a href="/admin/courseList.html"><i class="el-icon-reading"></i> 课程管理</a>
                </el-menu-item>
                <el-submenu index="tools" disabled>
                    <template slot="title">
                        <i class="el-icon-suitcase"></i> 助学工具
                    </template>
                    <el-menu-item index="tools-1">问答</el-menu-item>
                    <el-menu-item index="tools-2">作业</el-menu-item>
                    <el-menu-item index="tools-3">题库</el-menu-item>
                    <el-menu-item index="tools-4">考试</el-menu-item>
                </el-submenu>
            </el-menu>
        </div>
        <div class="page-main">
            <div class="admin-panel">
                <div class="panel-header">
                    <div class="panel-title">用户看板<small>（暂不开发）</small></div>
                </div>
                <div class="panel-body dashboard">
                    <div class="dashboard-cell">
                        <div class="dashboard-value">{{dashboard.dayNew || 0}}</div>
                        <div class="dashboard-label">今日新增</div>
                    </div>
                    <div class="dashboard-cell">
                        <div class="dashboard-value">{{dashboard.weekNew || 0}}</div>
                        <div class="dashboard-label">7日新增</div>
                    </div>
                    <div class="dashboard-cell">
                        <div class="dashboard-value">{{dashboard.monthNew || 0}}</div>
                        <div class="dashboard-label">30日新增</div>
                    </div>
                    <div class="dashboard-cell">
                        <div class="dashboard-value">{{dashboard.dayActive || 0}}</div>
                        <div class="dashboard-label">今日活跃</div>
                    </div>
                    <div class="dashboard-cell">
                        <div class="dashboard-value">{{dashboard.weekActive || 0}}</div>
                        <div class="dashboard-label">7日活跃</div>
                    </div>
                    <div class="dashboard-cell">
                        <div class="dashboard-value">{{dashboard.monthActive || 0}}</div>
                        <div class="dashboard-label">30日活跃</div>
                    </div>
                </div>
            </div>

            <div class="admin-panel">
                <div class="panel-header">
                    <div class="panel-title">用户增长</div>
                </div>
                <div class="panel-body">暂不开发</div>
            </div>

            <div class="admin-panel">
                <div class="panel-header">
                    <div class="panel-title">用户留存</div>
                </div>
                <div class="panel-body">暂不开发</div>
            </div>

            <div class="admin-panel">
                <div class="panel-header">
                    <div class="panel-title">视频播放量</div>
                </div>
                <div class="panel-body">
                    暂不开发
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="/static/global.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            dashboard: {},
        },
        methods: {
            load: function () {
                let vue = this;
            }
        },
        mounted: function () {
            this.load();
        }
    })
</script>
</html>